<template>
  <div class="container">
    <div id="myEchart2"></div>
    <pine-Chart-Frame :dialogVisible="dialogVisible" :level="level" @handleClose="handleClose" />
  </div>
</template>

<script>
// 引入js，不需要带后缀
import Sever from '@/api/selfApi'
import pineChartFrame from './subpage/pineChartFrame'
const echarts = require('echarts')
export default {
  name: 'echartsTest2',
  components: {
    pineChartFrame
  },
  data() {
    return {
      dialogVisible: false,
      level: '', 
      option: {
        data: []
      }
    }
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    async initEchart() {
      let _this = this
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.analyse.getZgbmNumScoreLevel({
          //请求参数(this.depCode是全局变量)
          dep_code: this.depCode
        })
        //取值赋给name和value
        let arr = res.map(item => {
          return {
            name: item.SCORELEVEL + '(' + item.JGNUM + ')',
            value: item.JGNUM,
            level: item.SCORELEVEL
          }
        })
        //赋值给变量
        this.data = arr
      } catch (error) {
        console.log(error)
      }
      //初始化echarts组件
      const myChart = echarts.init(document.getElementById('myEchart2'))
      myChart.clear()
      const option = {
        title: {
          show: true,
          text: '评分情况汇总', //主标题文本
          x: 'center', //水平安
          y: '10px', //垂直
          textStyle: {
            fontSize: 20,
            fontStyle: 'normal',
            fontWeight: '666',
            color: '#333'
          }
        },
        grid: {
          left: '0%',
          top: '40px',
          right: '0%',
          bottom: '0',
          containLabel: true
        },

        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          top: 'bottom'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.on('click', function (param) {
				_this.level = param.data.level;
        _this.dialogVisible = true;
      });
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener('resize', () => myChart.resize(), false)
    }
  }
}
</script>

<style lang="scss">
.container {
  width: 100%;
  height: 50%;
}
#myEchart2 {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
